<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="彭俊超">
    <title>倒计时</title>
    <style>
        .outer{
            width:300px;
            height:200px;
            background-color:coral;
            border-radius:10px;
            margin:50px auto;
            position:relative;
        }
        .inner{
            position: absolute;
            top:50px;
            width:100%;
            height:100px;
            background-color:#333;
            padding:0px 20px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
        }
        span{
            display: inline-block;
            width:60px;
            height:40px;
            background-color:white;
            margin-top:18px;
            box-shadow: 0px 0px 5px green;
            font-size:30px;
            line-height:40px;
            text-align: center;
        }
        strong{
            position:relative;
            top:5px;
            color:#ccc;
            font-size:25px;
            height:60px;
            line-height:60px;
            line-height:60px;
            margin:0px 5px;
        }
        button{
            position: absolute;
            bottom:5px;
            left:calc(50% - 35px);
            width:80px;
            height:40px;
            background-color:#10ffbb;
            border-radius:5px;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner">
            <span class="shi">5</span>
            <strong>时</strong>
            <span class="fen">28</span>
            <strong>分</strong>
            <span class="miao">40</span>
            <strong>秒</strong>
        </div>
        <button type="button">点击开始</button>
    </div>
</body>

</html>
<script>
    var shi = document.querySelector('.shi');
    var fen = document.querySelector('.fen');
    var miao = document.querySelector('.miao');
    var button = document.querySelector('button');
    var buttonClick = true;
    var timer = null;
    button.onclick = function(){
        if(buttonClick == true){
            function miaoChange(){
                miao.innerHTML--;
                if(miao.innerHTML < 0){
                    if((fen.innerHTML == 0) && (shi.innerHTML == 0)){
                        miao.innerHTML = 0;
                        button.innerHTML = '计时结束';
                        clearInterval(timer);
                        button.disabled = true;
                    }else{
                        miao.innerHTML = 59;
                        fenChange();
                    }
                }
            }

            function fenChange(){
                if(fen.innerHTML >= 0){
                        if(fen.innerHTML > 0){
                            fen.innerHTML--;
                        }else{
                            if(shi.innerHTML < 0){
                                fen.innerHTML = 0;
                            }else{
                                shiChange();
                            }
                        }
                }
            }

            function shiChange(){
                if( shi.innerHTML >= 0){
                    shi.innerHTML--;
                    fen.innerHTML = 59;
                }
                else{
                    shi.innerHTML = 0;
                }
            }
            timer = setInterval(miaoChange,1);
            button.innerHTML = '开始计时';
            buttonClick = false; 
        }else{
            clearInterval(timer);
            buttonClick = true;
            button.innerHTML = '停止';
        }
    }
</script>